<template>
  <div class="content-main margin--top">
    <div>文章操作:</div>

    <div class="margin--top">
      <el-button @click="handleDeleteArticle" class="danger">删除</el-button>
      <el-button @click="handleEditorArticle">修改</el-button>
      <el-button v-if="isAdmin" @click="handleDisabkeArticle" class="danger">禁用</el-button>
    </div>

    <editor-confirm v-model="showConfirm" content="确定删除文章吗" @confirm="handleConfirmEvent" />
    <editor-opinion v-model="showOpinion" content="请输入禁用理由" @confirm="handleOpinionEvent" />

    <div class="cover-layer" v-if="showLoading">
      <div class="pos-center el-icon-loading"></div>
    </div>
  </div>
</template>

<script>
import API from '~/interface/Word';
export default {
  components: {
    EditorConfirm: () => import('~/components/public/Confirm'),
    EditorOpinion: () => import('~/components/public/Opinion')
  },

  props: {
    wordInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    userInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },

  data() {
    return {
      showConfirm: false,
      showOpinion: false,
      showLoading: false
    }
  },

  computed: {
    isAdmin() {
      const { wordInfo, userInfo } = this;
      return userInfo.scope === 'ADMIN' || userInfo.scope === 'SP_ADMIN';
    }
  },

  methods: {
    handleDeleteArticle() {
      this.showConfirm = true;
    },
    handleDisabkeArticle() {
      this.showOpinion = true;
    },
    handleEditorArticle() {
      let id = this.$route.params.id;
      this.showLoading = true;
      API.getWordDetail(id, { edit: true }).then(res => {
        if (res && res.id) {
          // 将获取到的文件缓存到本地
          sessionStorage.cacheArticle = JSON.stringify(res);
          this.$router.push('/word/release');
          this.showLoading = false;
        }
      }).catch(err => {
        this.showLoading = false;
      });
    },
    handleConfirmEvent() {
      let id = this.$route.params.id;
      this.showLoading = true;
      API.deleteThisWord({ id }).then(res => {
        this.$message({
          type: 'success',
          message: '已删除该篇文章'
        });
        this.showLoading = false;
        this.$router.replace('/');
      }).catch(err => {
        this.showLoading = false;
      });
    },
    handleOpinionEvent(info) {
      let id = this.$route.params.id;
      this.showLoading = true;

      if (this.wordInfo.status === '1') {
        API.postDisableWord({ id, info }).then(res => {
          this.$message({
            type: 'success',
            message: '已禁用该篇文章'
          });
          this.wordInfo.status = '2';
          this.showLoading = false;
        }).catch(err => {
          this.showLoading = false;
        });
      } else {
        this.$message.error('该文章已经被禁用过啦~');
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content-main {
  padding: 10px 15px 20px;

  .el-button {
    padding: 8px 15px;
    // margin: 0;
  }

  .el-icon-loading {
    font-size: 35px;
    color: #fff;
  }
}
</style>